<template>
  <div className="app-container">
    <el-input
      v-model="filterText"
      placeholder="Filter keyword"
      style="margin-bottom: 30px"
    />
    <el-tree
      ref="tree2"
      :data="data2"
      :props="defaultProps"
      :filter-node-method="filterNode"
      class="filter-tree"
      default-expand-all
    />
  </div>
</template>

<script setup lang="ts">
import {
  watch, toRefs, reactive, ref, Ref,
} from 'vue'
import { ObjTy } from '@/types/common'

const state = reactive({
  filterText: '',
  data2: [
    {
      id: 1,
      label: 'Level one 1',
      children: [
        {
          id: 4,
          label: 'Level two 1-1',
          children: [
            {
              id: 9,
              label: 'Level three 1-1-1',
            },
            {
              id: 10,
              label: 'Level three 1-1-2',
            },
          ],
        },
      ],
    },
    {
      id: 2,
      label: 'Level one 2',
      children: [
        {
          id: 5,
          label: 'Level two 2-1',
        },
        {
          id: 6,
          label: 'Level two 2-2',
        },
      ],
    },
    {
      id: 3,
      label: 'Level one 3',
      children: [
        {
          id: 7,
          label: 'Level two 3-1',
        },
        {
          id: 8,
          label: 'Level two 3-2',
        },
      ],
    },
  ],
  defaultProps: {
    children: 'children',
    label: 'label',
  },
})
const tree2: Ref = ref(null)
watch(
  () => state.filterText,
  (val) => {
    tree2.value.filter(val)
  },
  {
    immediate: false,
  },
)
const filterNode = (value: string, data: ObjTy) => {
  if (!value) return true
  return data.label.indexOf(value) !== -1
}
// export to page for using
const { filterText, data2, defaultProps } = toRefs(state)
</script>
